{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<!--数据列表页面-->
<style>
    .td-do-div{
        display: flex;
        justify-content: space-around;
        align-items:center;
        width: 80px;
        flex-wrap: nowrap;
    }
    .td-do-div a{
        margin-top: 3px;
    }
</style>
<section class="content">

    <!--顶部搜索筛选-->
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <form class="form-inline searchForm" id="searchForm" action="{:url('index')}" method="GET">

                        <div class="form-group">
                            <select name="department_id" id="department_id" class="form-control field-select"
                                    data-placeholder="请选择部门">
                                <option value=""></option>
                                {$department_list|raw}
                            </select>
                        </div>
                        <script>
                            $('#department_id').select2();
                        </script>
                        <div class="form-group">
                            <div class="col-md-2">
                                <input id="salary_time" name="salary_time"
                                       value="{$salary_time|default=''}" placeholder="请选择工资时间" type="text"
                                       class="form-control filed-datetime" autocomplete="off">
                            </div>
                        </div>
                        <script>
                            $('#staff_id').select2();
                            $('#department_id').select2();

                            laydate.render({
                                elem: '#salary_time',
                                type: 'month',
                                btns:[],
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#salary_time").val(value);
                                },

                            });
                        </script>

                        <div class="form-group">
                            <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i> 查询
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="exportData()" class="btn btn-sm btn-warning exportData" type="button"><i
                                    class="fa fa-search"></i> 导出
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="clearSearchForm()" class="btn btn-sm btn-default" type="button"><i
                                    class="fa  fa-eraser"></i> 清空查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">

                <!--数据列表顶部-->
                <div class="box-header">
                    <div>
                        <button data-toggle="tooltip" class="btn btn-primary btn-sm yijian">
                            一键生成
                        </button>
                        <a class="btn btn-danger btn-sm AjaxButton" data-toggle="tooltip" title="删除选中数据"
                           data-confirm-title="删除确认" data-confirm-content="您确定要删除选中的数据吗？" data-id="checked"
                           data-url="{:url('del')}">
                            <i class="fa fa-trash"></i> 删除
                        </a>
                        <a class="btn btn-success btn-sm ReloadButton" data-toggle="tooltip" title="刷新">
                            <i class="fa fa-refresh"></i> 刷新
                        </a>
                    </div>
                </div>

                <div class="box-body table-responsive" >
                    <table class="table table-hover table-bordered table-condensed datatable"  id="table" data-toggle="table" >
                        <thead>
                        <tr>
                            <th>
                                <input id="dataCheckAll" type="checkbox" onclick="checkAll(this)" class="checkbox"
                                       placeholder="全选/取消">
                            </th>
                            <th>ID</th>
                            <th>部门</th>
                            <th><p style="width: 60px;white-space: normal;text-overflow: ellipsis;overflow: hidden"></p>工资日期</th>
                            {foreach name="insure_data" item="item"}
                            <th>{$item}</th>
                            {/foreach}
                            <th>更新时间</th>

                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name="data" item="item"}
                        <tr>
                            <td>
                                <input type="checkbox" onclick="checkThis(this)" name="data-checkbox"
                                       data-id="{$item.id}" class="checkbox data-list-check" value="{$item.id}"
                                       placeholder="选择/取消">
                            </td>
                            <td class="id">{$item.id}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.department_name}</p></td>
                            <td class="salary_time">{$item.salary_time |date='Y-m'}</td>
                            {foreach name='item.salary_total_json' item='v' key='k'}
                            <td class="{$k}">{$v}</td>
                            {/foreach}
                            <td class="update_time"><p style="white-space: nowrap; text-overflow: ellipsis;">{if $item.update_time}{$item.update_time | date='Y-m-d
                                H:i:s'}{else}{/if}
                            </p></td>

                            <td class="td-do-div">
                                {if $item.id}
                                <button
                                        class="edit btn btn-success btn-xs"
                                        data-department_id="{$item.department_id}"
                                        data-salary_time="{$item.salary_time}"data-id="{$item.id}" title="重新生成">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <a class="btn btn-danger btn-xs AjaxButton" data-toggle="tooltip"
                                                 title="删除"
                                                 data-id="{$item.id}" data-confirm-title="删除确认"
                                                 data-confirm-content='您确定要删除ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                                 data-url="{:url('del')}">
                                <i class="fa fa-trash"></i>
                            </a>{else}
                                <button
                                        class="shengcheng btn btn-primary btn-xs"
                                        data-department_id="{$item.department_id}"
                                        data-salary_time="{$item.salary_time}" title="生成">
                                    <i class="fa fa-forward"></i>
                                </button>
                                {/if}
                            </td>
                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>

                <!-- 数据列表底部 -->
                <div class="box-footer">
                    {$page|raw}
                    <label class="control-label pull-right" style="margin-right: 10px; font-weight: 100;">
                        <small>共{$total}条记录</small>&nbsp;
                        <small>每页显示</small>
                        &nbsp;
                        <select class="input-sm" onchange="changePerPage(this)">
                            <option value="10" {if $admin.per_page==10}selected{/if}>10</option>
                            <option value="20" {if $admin.per_page==20}selected{/if}>20</option>
                            <option value="30" {if $admin.per_page==30}selected{/if}>30</option>
                            <option value="50" {if $admin.per_page==50}selected{/if}>50</option>
                            <option value="100" {if $admin.per_page==100}selected{/if}>100</option>
                        </select>
                        &nbsp;
                        <small>条记录</small>
                    </label>
                </div>

            </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        $(window).resize(function() {
            $('#table').bootstrapTable('destroy').bootstrapTable(
                {
                    height:$(window).height()-306,
                });
        });
        $('#table').bootstrapTable('destroy').bootstrapTable(
            {height:$(window).height()-306,
            fixedColumns:true,
            fixedNumber:4,
            onClickRow:function (row,$element) {
                $('.info').removeClass('info');//移除class
                $($element).addClass('info');//添加class
            },
        });
    });
    $('.yijian').click(function () {

        let salary_time = $('#salary_time').val();
        if (salary_time ==''){
            layer.alert('请先选择工资时间',{
                icon:0,
            })
            return false;
        }
        var index = layer.load(2, {
            shade: [0.6,'#000'] //0.1透明度的白色背景
        });

        $.ajax({
            url: "{:url('totals')}",
            dataType: 'json',
            type: "POST",
            data: {"salary_time":salary_time},
            success:function (res) {
                layer.closeAll('loading');
                window.location.reload();
            }
        })
    });
    $('.edit').click(function () {
        let salary_time = $(this).data('salary_time');
        let department_id = $(this).data('department_id');
        let id = $(this).data('id');
        let data = {"salary_time": salary_time, "department_id": department_id,'id':id};
        var that = $(this);
        $.ajax({
            url: "{:url('edit')}",
            dataType: 'json',
            type: "POST",
            data: data,
            success: function (r) {
                if (r.code == 0) {
                    layer.alert(r.msg, {
                        icon: 0,
                    });
                } else {
                    var id = r.data.id;
                    $.each(r.data, function (e, v) {
                        if (e == 'id') {
                            that.parents('tr').find(".id").text(v);

                        }
                        if (e == 'salary_time') {
                            that.parents('tr').find(".salary_time").text(v);
                        }
                        if (e == 'update_time') {
                            that.parents('tr').find('.update_time').text(v);
                        }
                        if (e == 'salary_total') {
                            $.each(v, function (i, val) {
                                that.parents('tr').find('.' + i).text(val);
                            })
                        }

                    })
                }
            }
        })
    });
    $('.shengcheng').click(function () {
        let salary_time = $(this).data('salary_time');
        let department_id = $(this).data('department_id');
        let data = {"salary_time": salary_time, "department_id": department_id};
        var that = $(this);
        $.ajax({
            url: "{:url('uniqueTotal')}",
            dataType: 'json',
            type: "POST",
            data: data,
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                    data.id=res.data.id;
                    layer.confirm(res.msg, {
                      btn:['生成','取消']
                    },function () {
                        $.ajax({
                            url: "{:url('edit')}",
                            dataType: 'json',
                            type: "POST",
                            data: data,
                            success: function (r) {

                                if (res.code == 0) {
                                    layer.alert(r.msg, {
                                        icon: 0,
                                    });
                                } else {
                                    var id = r.data.id;
                                    var department_id = r.department_id;
                                    var salary_time = r.salary_time;

                                    $.each(r.data, function (e, v) {
                                        if (e == 'id') {
                                            that.parents('tr').find(".id").text(v);

                                        }
                                        if (e == 'salary_time') {
                                            that.parents('tr').find(".salary_time").text(v);
                                        }
                                        if (e == 'update_time') {
                                            that.parents('tr').find('.update_time').text(v);
                                        }
                                        if (e == 'salary_total') {
                                            $.each(v, function (i, val) {
                                                that.parents('tr').find('.' + i).text(val);
                                            })
                                        }

                                    })
                                }
                            }
                        })
                    },function () {

                    });
                } else {
                    // $(this).href = "{:url('total')}"+"?salary_time="+salary_time+"&department_id="+department_id
                    $.ajax({
                        url: "{:url('total')}",
                        dataType: 'json',
                        type: "POST",
                        data: data,
                        success: function (r) {
                            console.log(r);
                            if (r.code == 0) {
                                layer.alert(r.msg, {
                                    icon: 0,
                                });
                            } else {
                                var id = r.data.id;
                                $.each(r.data, function (e, v) {
                                    if (e == 'id') {
                                        that.parents('tr').find(".id").text(v);

                                    }
                                    if (e == 'salary_time') {
                                        that.parents('tr').find(".salary_time").text(v);
                                    }
                                    if (e == 'update_time') {
                                        that.parents('tr').find('.update_time').text(v);
                                    }
                                    if (e == 'salary_total') {
                                        $.each(v, function (i, val) {
                                            that.parents('tr').find('.' + i).text(val);
                                        })
                                    }

                                })
                                that.parents('.td-do').append(`
                                    <button
                                            class="edit btn btn-success btn-xs"
                                            data-department_id="${department_id}"
                                            data-salary_time="${salary_time}" data-id="${id}" title="修改">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <a class="btn btn-danger btn-xs AjaxButton" data-toggle="tooltip" title="删除"
                                                 data-id="${id}" data-confirm-title="删除确认"
                                                 data-confirm-content='您确定要删除ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                                 data-url="{:url('del')}">
                                <i class="fa fa-trash"></i>
                            </a>`);
                                that.remove();
                            }
                        }
                    })

                }
            }
        })

    })
</script>
{/block}

